AWS SDK for JavaScriptを使ってブラウザーからCognito User Poolsへサインアップしてみた

植木和樹

2016.05.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは植木和樹＠上越妙高オフィスです。ゴールデンウィークということで、普段なかなか触る機会のないサービスを使って遊んでいます。

本日は先日発表されたCognito User Poolsを使ってみました。外部の認証基盤を使うことなく、AWSだけでユーザー管理や認証ができる優れものですね。

[新機能] Amazon Cognito に待望のユーザー認証基盤「User Pools」が追加されました！｜ Developers.IO

準備

Cognito User Poolsの作成

User Poolsは上記、諏訪さんのブログを参考に設定しておきます。今回はaws-cliで作成しましたが、aws-cliだと（現時点だと）細かいattributeの設定ができないので、画面から設定した方が良さそうです。

$ cat password_policy.json
{
  "PasswordPolicy": {
    "MinimumLength": 8,
    "RequireUppercase": true,
    "RequireLowercase": true,
    "RequireNumbers": true,
    "RequireSymbols": true
  }
}

$ aws cognito-idp create-user-pool --pool-name mypool --policies file://password_policy.json --alias-attributes preferred_username --region us-east-1

AppsはcognitoとmyAppの2つを作成しました。

20160504_cognito-userpools-javascript_01

JavaScript実行時に必要なのは次の情報です。

リージョン: us-east-1 （現在はVirgnia固定）
UserPoolId: UserPool作成後にPool Details画面で確認できます。us-east-1_で始まるIDです。
ClientId: UserPoolにAppsを登録するとApp client idとして確認できます。なおAppsを作るときにGenerate client secretのチェックはオフにしてください。

Cognito Identity Poolsの作成

Cognito Identity Poolsは、諏訪さんの別ブログを参考に。

[Amazon Cognito] Cognito の導入方法がより簡単になりました！｜ Developers.IO

20160504_cognito-userpools-javascript_02

Authentication providersにCognitoのタブが増えています。User Pools作成時に控えておいた、UserPoolIdと"cognito" AppsのClientIdを入力しましょう。

またEnable access to unauthenticated identitiesのチェックをオンにするのを忘れずに！チェックがオフだとサインアップ自体ができなくなります。なおUnauthenticated role（未認証時に使われるRoleの権限）はデフォルトでもSignInのアクションは許可されているようです。

JavaScript実行時に必要なのは次の情報です。

IdentityPoolId: Identity Pool作成後に"Edit identity pool"の画面から確認できます。 us-east-1:で始まるIDです。

aws-cognito-sdkとamazon-cognito-identity のJavaScriptファイル

さて、あとはJavaScriptを記述するだけなのですが、AWSのドキュメントサンプル通りに書いても「動きません」。

Examples: Using the JavaScript SDK - Amazon Cognito

この辺はPublic Betaですからね。仕方ないですね。で、解決方法は下記のフォーラムで紹介されています。

userPool.signUp results in CredentialsError: Missing credentials in config · Issue #2 · aws/amazon-cognito-identity-js

つまりAWS SDK for JavaScriptとは別に、amazon-cognito-identity.jsなどいくつかのJavaScrptファイルを用意しないといけないようです。必要なファイルと入手元は aws/amazon-cognito-identity-js で紹介されているので、6つのファイルを入手してください。

amazon-cognito-identity.min.js
aws-cognito-sdk.min.js
jsbn.js
jsbn2.js
moment.js
sjcl.js

サインアップコードと実行結果

サンプルコード

フォーラムでサンプルコードも紹介されていますが、名前空間がAWSとAWSCognitoと分かれていたり、IdentityPoolIdをそれぞれ指定しなければいけなかったりとまだまだ開発の真っ最中のようですね。2016/05/04現在の動くコードですが、しばらくしたら非推奨になる可能性が高いです。